<style lang="css" src="./blacklist-manage.css"></style>

<template lang="html">
  <div class="blacklist-manage">
    <div class="blacklist-title">黑名单管理</div>
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th class="col-xs-2">用户昵称</th>
          <th class="col-xs-2">用户ID</th>
          <th class="col-xs-2">取消订阅次数</th>
          <th class="col-xs-2">是否黑名单</th>
          <th class="col-xs-4"></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in blackList">
          <td class="col-sm-2">{{item.name}}</td>
          <td class="col-sm-2">{{item.id}}</td>
          <td class="col-sm-2">{{item.number}}</td>
          <td class="col-sm-2">{{item.isBlackUser ? '是' : '不是'}}</td>
          <td class="col-sm-4">
            <button class="btn btn-sm"
              :class="{'btn-danger': item.isBlackUser, 'btn-primary': !item.isBlackUser}"
              @click="evtToogleAddList(item)">{{item.isBlackUser ? '移除黑名单' : '加入黑名单'}}</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script src="./blacklist-manage.js"></script>
